import React, { Component } from 'react';
import Header from './Header'
import List from './List'
import Item from './Item'

class Todo extends Component {
    constructor(props) {
        super(props);
    }
    state = { 
        list:[
            // title标题，done是否完成，status状态0 正常状态 1 编辑状态
            {title:"学会Vue",done:true,status:0},
            {title:"开发人工智能软件",done:false,status:0},
        ],
        // 被添加的临时数据
        temp:{title:"",done:false,status:0},
     }
    //  生命周期挂载完毕后取本地的数据
    componentDidMount() {
        // 获取本地list数据，没有就是[]
        var list = localStorage.getItem("list")||"[]";
        // 转换为js
        list = JSON.parse(list);
        // 更新视图
        this.setState({list})
    }
    addItem = ()=>{
        var list = this.state.list;
        var temp = this.state.temp;
        // 添加temp到list
        list.unshift({...this.state.temp})
        // 清空title
        temp.title = "";
        // 更新temp
        this.setState({list,temp})
        localStorage.setItem("list",JSON.stringify(this.state.list))
    }
    //更新temp
    updateTemp = (temp)=>{
        this.setState({temp})
    }
    // 更新item
    updateItem = (item,old)=>{
        var list  = this.state.list;
        // 查找item在list中的下标
        var ind = list.findIndex(value=>value.title===old.title);
        // 跟下list第ind个
        list[ind] = {...item};
        // 更新视图
        this.setState({list})
        localStorage.setItem("list",JSON.stringify(this.state.list))

    }
    // 删除item
    delItem = (item)=>{
        var list  = this.state.list;
        // 查找item在list中的下标
        var ind = list.findIndex(value=>value.title===item.title);
        // 执行删除
        list.splice(ind,1);
        // 更新视图
        this.setState({list})
        localStorage.setItem("list",JSON.stringify(this.state.list))
    }
    render() { 
        var list = this.state.list;
        return ( <div>
            <h1>Todolist</h1>
            <Header temp={this.state.temp} updateTemp={this.updateTemp} addItem={this.addItem}></Header>
            <List title="未完成">
                {list.filter(item=>!item.done).map((item,index)=><Item 
                item={item}
                updateItem={this.updateItem}
                delItem={this.delItem}
                key={index}></Item>)}
            </List>
            <List title="已完成">
                {list.filter(item=>item.done).map((item,index)=><Item 
                item={item}
                updateItem={this.updateItem}
                delItem={this.delItem}
                key={index}></Item>)}
            </List>
        </div> );
    }
}
 
export default Todo;